<template>
  <refresh class="u-refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
    <image class="loading-bg" resize="contain" src="http://doc.zwwill.com/yanxuan/imgs/yxbox-bg.png?v5"></image>
    <div class="l-txt-box">
      <text ref="lTxt1" class="l-txt l-txt-1">好</text>
      <text ref="lTxt2" class="l-txt l-txt-2">的</text>
      <text ref="lTxt3" class="l-txt l-txt-3">生</text>
      <text ref="lTxt4" class="l-txt l-txt-4">活</text>
      <text ref="lTxt5" class="l-txt l-txt-5">没</text>
      <text ref="lTxt6" class="l-txt l-txt-6">那</text>
      <text ref="lTxt7" class="l-txt l-txt-7">么</text>
      <text ref="lTxt8" class="l-txt l-txt-8">贵</text>
    </div>
  </refresh>
</template>
<style scoped>

  .u-refresh{
    height: 170px;
    width: 750px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .loading-bg{
    position: absolute;
    left: 250px;
    margin-top: 40px;
    width: 250px;
    height: 120px;
  }
  .l-txt-box{
    height: 106px;
    width: 200px;
    overflow: hidden;
  }
  .l-txt{
    height: 30px;
    width: 30px;
    font-size: 25px;
    position: absolute;
    top: 105px;
    left: 87px;
    color:#666;
  }

</style>
<script>
  var animation = weex.requireModule('animation')
  var modal = weex.requireModule('modal')
  export default {
    props:[],
    data () {
      return {
        refreshing: false,
        loadingAR:[
          {ref :'lTxt1',p:[-77,-75],delay:0},
          {ref :'lTxt2',p:[-47,-81],delay:50},
          {ref :'lTxt3',p:[-15,-88],delay:100},
          {ref :'lTxt4',p:[12,-90],delay:150},
          {ref :'lTxt5',p:[-5,-49],delay:200},
          {ref :'lTxt6',p:[25,-55],delay:250},
          {ref :'lTxt7',p:[55,-61],delay:300},
          {ref :'lTxt8',p:[85,-61],delay:350}
        ]
      }
    },
    methods: {

      loadingAni(){
        for(var i=0;i<this.loadingAR.length;i++){
          this.shake(this.$refs[this.loadingAR[i].ref],this.loadingAR[i].p[0],this.loadingAR[i].p[1],3,1,200,this.loadingAR[i].delay);
        }
      },
      loadingAniDown(){
        for(var i=0;i<this.loadingAR.length;i++){
          this.shake(this.$refs[this.loadingAR[i].ref],0,0,0,0,200);
        }
        this.$emit('loadingDown',{
          status : 'loadingDown'
        })
      },
      shake(_ref,_x,_y,_k,_d,_duration,_delay){
        animation.transition(_ref, {
          styles: {
            transform:'translate('+(_x-0)+'px,'+(_y-_k*_d)+'px)',
          },
          duration: _duration | 500, //ms
          timingFunction: 'ease-out',
          delay: _delay | 0 //ms
        },function () {
          this.refreshing&&this.shake(_ref,_x,_y,_k,-1*_d);
        }.bind(this))
      },
      onrefresh (event) {
//                console.log('is refreshing')
//                modal.toast({ message: 'refresh', duration: 1 })

        this.loadingAni();
        this.refreshing = true;
        setTimeout(() => {
          this.refreshing = false;
          this.loadingAniDown();
        }, 1300)
      },
      onpullingdown (event) {
      }
    }
  }
</script>